import { Component, Prop, State, h } from '@stencil/core';
import { format } from '../../utils/utils';

/**
 * 装饰器就是一个特殊的代理，链接着我们自定义书写的元数据和 Stencil 的编译逻辑，
 * 也可以理解它为一个语法糖，让我们快速高效的使用 Stencil 封装好的特性
 */
@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  @State() num: number = 0;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return (
      <div>
        <button onClick={() => this.num += 1}>add</button>
        Hello, World! I'm {this.getText()}
        number is {this.num}
      </div>
    )
  }
}
